<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Marquee-跑马灯</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<link rel="stylesheet" href="../../assets/css/reset.css"/>
	    <link rel="stylesheet" href="../../assets/css/example.css"/>
	    <style>
			/*滚动样式*/
			.scroll{
				width:600px;
				height:29px;
				line-height:29px;
				border:1px solid #CDD7E6;
				text-align:left; 
				margin:10px 0px 50px 50px;
				overflow:hidden		  
			}
			.scroll table{border-collapse:collapse;border-spacing:0;border:none}
			.scroll table span{
				color:#666666;
				padding:0 0 0 8px;
				display:inline-block;
			}
	    </style>
	    <script src="../../jquery/jquery-1.7.1.min.js"></script>
		<script src="marquee.js"></script>
	</head>
<body>
		 <h1>Marquee类及方法：</h1>
		 <div class="direction">
			 <ul>
			 	  <li>构造函数：new CNC.ui.Marquee(args);</li>
			 	  <li>参数： @param args <br/>参数没有顺序，不设则使用默认值。<br/>
			 	  	object {<br/>
				 	  	speed:{Number},<span class="comment">滚动速度，单位：毫秒。默认每10毫米滚动1px</span><br/>				 	  	
				 	  	autoStart:{Boolean},<span class="comment">自动滚动，true:自动滚动(默认)，false:不自动滚动</span><br/>
							scrollObjId:{String},<span class="comment">滚动容器ID，必要参数</span><br/>
			 	  	}</li>
			 	  <li>方法：start(), <span class="comment">开始滚动。</span></li>
			    <li>方法：stop() ,<span class="comment">停止滚动。</span></li>
			 </ul>
		 </div>
		 <h1>使用说明：</h1>
		 	<div class="direction">
				 <ul>
				 	  <li>div#marquee定义宽度和overflow:hidden</li>
				 	  <li>第一个td的ID为滚动对象id + "-content1"</li>
				 	  <li>第二个td的ID为滚动对象id + "-content2"，不需要添加内容</li>
				 	  <li>使用表格后对文字宽度没有限制</li>
				 </ul>
			</div>
		 <textarea class="code" style="height:210px;">
CSS代码：
  .scroll{width:600px;height:29px;line-height:29px;border:1px solid #CDD7E6;text-align:left; margin:10px 0px 50px 50px;overflow:hidden;}
  .scroll table{border-collapse:collapse;border-spacing:0;border:none}
HTML代码：
  <div id="marquee" class="scroll">//id和class可以自定义
  	<table>
  		<tbody>
	  	  <tr>
	  	  	<td id="marquee-content1">//ID规则为滚动对象id + "_content1"
	  	  		<nobr>//nobr避免文字换行，只须替换nobr标签里的内容
	  	  			<a href="#">Gucci全新运动腕表</a>
					<a href="#">万宝龙夜航系列手提包</a>
					<a href="#">Sergio Rossi穿孔凉鞋包</a>
					<a href="#">“High”翻泳池派对 清爽护肤拒绝油腻</a>	 	  
	  	  		</nobr>	  	  		
	  	  	</td>
	  	  	<td id="marquee-content2"></td>//ID规则为滚动对象id + "_content2"，不需要添内容
	  	  </tr>
	  	</tbody>
  	</table>
  </div>
JS代码：
  <script>
  	var arg = {
  		speed:20,
   		scrollObjId:"marquee"
  	}
  	var s = new CNC.ui.Marquee(arg);
  </script>
		 </textarea>

  <h1>例子：</h1>
  <div id="marquee" class="scroll">
  	<table>
  		<tbody>
	  	  <tr>
	  	  	<td id="marquee-content1" style="white-space: nowrap">  				
				<a href="#">Gucci全新运动腕表</a>
				<a href="#">万宝龙夜航系列手提包</a>
				<a href="#">Sergio Rossi穿孔凉鞋包</a>
				<a href="#">“High”翻泳池派对 清爽护肤拒绝油腻</a>	  	  			 	  		
	  	  	</td>
	  	  	<td id="marquee-content2" style="padding-left:8px;white-space: nowrap"></td>
	  	  </tr>
	  	</tbody>
  	</table>
  </div>
  <script>
  	var arg = {
  		speed:20,
   		scrollObjId:"marquee"
  	}
  	var s = new CNC.ui.Marquee(arg);
  </script>
</body>
</html>